<template>
  <ElContainer class="container" direction="vertical">
    <ElHeader><Header /></ElHeader>
    <ElContainer>
      <ElAside class="aside">
        <ElMenu
          ref="menu"
          :default-active="menuActive"
          class="menu"
          :unique-opened="true"
          @select="handleMenuClick"
        >
          <ElMenuItem index="Main">
            <template slot="title">
              <i class="el-icon-main">a</i>
              <span>首页</span>
            </template>
          </ElMenuItem>
          <template v-for="(menu, index) in tabsMenu" :index="'' + index + 1">
            <ElMenuItem
              v-if="menu.is_url === 1"
              :key="menu.name"
              :index="allMenus[menu.name]"
            >
              <template slot="title">
                <i :class="'el-icon-' + menu.name_eng">a</i>
                <span class="item">{{ menu.name }}</span>
              </template>
            </ElMenuItem>

            <ElSubmenu v-else :key="menu.name" :index="allMenus[menu.name]">
              <template slot="title">
                <i :class="'el-icon-' + menu.name_eng">a</i>
                <span>{{ menu.name }}</span>
              </template>
              <ElMenuItemGroup v-for="tab in menu.data" :key="tab.name">
                <ElMenuItem :index="allMenus[tab.name]">
                  <template slot="title">
                    <span class="item">{{ tab.name }}</span>
                  </template>
                </ElMenuItem>
              </ElMenuItemGroup>
            </ElSubmenu>
          </template>
        </ElMenu>
      </ElAside>
      <ElMain>
        <ElTabs
          ref="tab"
          v-model="menusNavigation.activeTab"
          addable
          @edit="handleCloseTab"
          @tab-click="tabClick"
        >
          <ElTabPane
            v-for="(tab, i) in tabs"
            :key="i"
            :label="tab.text"
            :name="`${i}`"
            :closable="tab.text === '首页' ? false : true"
          >
            <template slot="label">
              <div class="label">
                <span class="item-icon"></span>
                <span class="item-label"> {{ tab.text }} </span>
              </div>
            </template>
            <Component
              :is="tab.tab"
              :class="tab.tab"
              :active-name="tab.nav || {nav: 0}"
            />
          </ElTabPane>
        </ElTabs>
      </ElMain>
    </ElContainer>
  </ElContainer>
</template>

<script>
import _ from 'lodash';
import {http, catchAppError} from '@/util';
import {menusNavigation} from '@/store';
import url from '@/config';
import tabViews from '@/tab-views';
import Header from '@/components/Header.vue';

export default {
  name: 'Manage',
  components: {...tabViews, Header},
  data() {
    return {
      tabViews,
      leftMenuClicked: false,
      Header,
      tabsMenu: [],
      submenus: [],
      menusNavigation,
      onemenus: [{is_url: 1, name: '首页'}]
    };
  },
  computed: {
    menuActive() {
      return menusNavigation.menuActive;
    },
    allMenus() {
      return menusNavigation.allMenus;
    },
    tabs() {
      return menusNavigation.tabs;
    }
  },
  beforeMount() {
    http
      .get(url.menu)
      .then(res => {
        this.tabsMenu = res;
        this.submenus = _.filter(this.tabsMenu, menu => menu.is_url === 2);
        this.onemenus = _.concat(
          this.onemenus,
          _.filter(this.tabsMenu, menu => menu.is_url === 1)
        );
        menusNavigation.tabsMenu = this.tabsMenu;
      })
      .catch(catchAppError);
  },
  mounted() {
    menusNavigation.$refsMenu = this.$refs.menu;

    const {menu} = this.$refs;
    menu.$off('item-click', menu.handleItemClick);
    menu.$on('item-click', item => {
      const {isEditing} = menusNavigation.tabs[+menusNavigation.activeTab];
      if (!isEditing) return menu.handleItemClick(item);
      // 否则询问
      return this.$confirm('信息修改未保存，是否确认离开页面？', '', {
        distinguishCancelAndClose: true,
        confirmButtonText: '是',
        cancelButtonText: '否'
      })
        .then(() => {
          menu.handleItemClick(item);
        })
        .catch(_.noop);
    });
  },
  methods: {
    handleMenuClick(tab) {
      menusNavigation.navTab(tab);
      this.leftMenuClicked = true;
    },
    handleCloseTab(name) {
      menusNavigation.closeTab(name);
    },
    tabClick(tab) {
      menusNavigation.menuActive = menusNavigation.allMenus[tab.label];
      this.closeMenu();
      this.leftMenuClicked = false;
    },
    closeMenu() {
      _.forEach(this.submenus, item =>
        this.$refs.menu.close(menusNavigation.allMenus[item.name])
      );
    }
  }
};
</script>

<style lang="scss">
@import '@/assets/css/util.scss';
:global {
  .container {
    height: 100%;
    .aside {
      width: 192px !important;
      overflow: hidden;
    }
    .menu {
      border-right: 0;
      padding-top: 20px;
      .el-submenu__title {
        font-weight: bold;
        font-size: 16px;
      }
      .el-menu-item {
        border-left: 4px solid #fff;
        font-weight: bold;
        font-size: 16px;
        &.is-active {
          border-left: 4px solid #2663c7;
          color: #2663c7;
          box-shadow: 0 0 25px rgba($color: #9aa3bc, $alpha: 0.35);
        }
        &:focus {
          background-color: initial;
        }
      }
      .el-submenu {
        border-left: 4px solid #fff;
        font-weight: bold;
        font-size: 16px;
        &.is-opened {
          border-left: 0;
        }
      }
      .el-submenu__icon-arrow {
        font-size: 16px;
        font-weight: 900;
      }
      .is-opened {
        .el-submenu__title {
          border-left: pxToRem(4) solid #2663c7;
          box-shadow: 0 0 25px rgba($color: #9aa3bc, $alpha: 0.35);
          background-color: #fff;
          color: #4b90ff;
          z-index: 1;
          i.el-icon-arrow-down {
            color: #2663c7;
          }
        }
        .el-menu {
          background-color: #fafafb;
        }
        .item {
          padding: 8px 20px;
        }
        .el-menu-item {
          background-color: #fafafb;
          box-shadow: none;
          &:focus {
            background-color: #fafafb;
          }
          &.is-active {
            border-color: #fafafb;
          }
        }
        .is-active {
          .item {
            background-color: #4b90ff;
            border-radius: 100px;
            color: #fff;
          }
        }
      }
      .el-menu-item [class^='el-icon-'],
      .el-submenu [class^='el-icon-'] {
        text-indent: -999px;
        height: 18px;
        background-image: url('../assets/img/icon.png');
      }
      .el-icon-consult {
        background-position: 0 -44px;
      }
      .el-icon-evaluating {
        background-position: 0 -88px;
        height: 19px;
      }
      .is-active .el-icon-evaluating {
        background-position: -23px -88px;
      }
      .el-icon-member {
        background-position: 0 -134px;
      }
      .el-icon-project {
        background-position: 0 -180px;
      }
      .el-icon-shop {
        background-position: 0 -221px;
      }
      .is-active [class^='el-icon-'] {
        background-position-x: -23px;
      }
    }
    .el-main {
      background-color: #f3f4f6;
      .el-tabs__header {
        margin-bottom: 20px;
      }
      .el-tabs__new-tab,
      .el-tabs__active-bar {
        display: none;
      }
      .el-tabs__nav-wrap {
        background-color: #fff;
        box-shadow: 0 0 25px rgba($color: #9aa3bc, $alpha: 0.35);
        &::after {
          display: none;
        }
        .el-tabs__item {
          height: inherit;
          line-height: 1;
          font-size: 16px;
          font-weight: bold;
          padding: 24px;
          border-left: 1px solid #f1f2f5;
          position: relative;
          &.is-active {
            .item-icon {
              background-color: #4b90ff;
            }
            .label {
              color: #4b90ff;
            }
          }
          .label {
            display: inline-block;
            color: #666;
          }
          .el-icon-close {
            position: absolute;
            top: 5px;
            right: 5px;
          }
          .item-icon {
            width: 12px;
            height: 12px;
            margin-bottom: 2px;
            display: inline-block;
            border-radius: 100%;
            background-color: #d0d1db;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
